<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>SpringMVC 测试页</title>


    <script type="text/javascript" src="/js/jquery.min.js"></script>

<%--    <script>--%>
<%--        $(function () {--%>

<%--            $("#ajaxBtn").bind("click",function () {--%>
<%--                // 发送ajax请求--%>
<%--                $.ajax({--%>
<%--                    url: '/demo/handle07',--%>
<%--                    type: 'POST',--%>
<%--                    data: '{"id":"1","name":"李四"}',--%>
<%--                    contentType: 'application/json;charset=utf-8',--%>
<%--                    dataType: 'json',--%>
<%--                    success: function (data) {--%>
<%--                        alert(data.name);--%>
<%--                    }--%>
<%--                })--%>

<%--            })--%>


<%--        })--%>
<%--    </script>--%>


</head>
<body>
<body>
<table width="600" border="1" cellspacing="0">
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>地址</th>
        <th>手机号</th>
        <th>删除</th>
        <th>编辑</th>
    </tr>
    </thead>
    <tbody id="tbMain"></tbody>
</table>
</body>
<script type="text/javascript">
    var  json;

    $(function(){
            // 发送ajax请求
            $.ajax({
                url: '${pageContext.request.contextPath}/demo/list',
                type: 'GET',
                data: '',
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                success: function (data) {
                    // alert(data)
                    // json = data
                    // alert(json.length)
                    var tbody = document.getElementById('tbMain');
                    for (var i = 0; i < data.length; i++) {
                        var tr = document.createElement("tr");
                        tr.innerHTML = '<td class="active">' + data[i].id + '</td><td class="active">' + data[i].name + '</td><td class="active">' + data[i].address + '</td><td class="active">' + data[i].phone + '</td><td type="button" class="warning" onClick=clickPerson('+data[i].id+') >删除</td><td class="warning" onClick=clickPerson('+data[i].id+') >编辑</td>';
                        tbody.appendChild(tr)
                    }
                }
            })


    });

    function clickPerson(id) {
        console.log(id)
        $.ajax({
            url: '${pageContext.request.contextPath}/demo/del?id='+id,
            // type: 'GET',
            // data: id,
            contentType: 'application/json;charset=utf-8',
            dataType: 'json',
            success: function (data) {
                location.reload()
            }
        })
    }
    // function add() {
    //     window.alert()
    // }

</script>
<form name="myForm" action="${pageContext.request.contextPath}/demo/add"
      onsubmit="return validateForm()" method="post">
    名字: <input type="text" name="name">
    手机号: <input type="text" name="phone">
    地址: <input type="text" name="address">
    <input type="submit" value="新增">
</form>
<%--<button type="button" onclick="add()">新增</button>--%>
<%--<tr id="lineDrop">--%>
<%--    <!-- 在这里面动态的添加td标签。 -->--%>
<%--</tr>--%>


<%--<ul class="mui-table-view">--%>
<%--    <button type="button">Click Me!</button>--%>
<%--</ul>--%>

</body>
</html>
